<template>
	<view class="park">
		<view class="return" @click="toReturn()" style="z-index: 999;background: white;">
			<u-icon name="arrow-left" size="20"></u-icon>
		</view>
		<view class="page-map">
			<map id="map" :style="!scaleMap?'height: 562rpx;width: 100%;':'height: 950rpx;width: 100%;'" :scale="scale"
				:latitude="latitude" :longitude="longitude" :markers="covers" :polyline="polyline">
				<!-- <cover-view class="tabs" @touchmove.prevent.stop="noop" catchtouchmove>
				<cover-image mode="widthFix" src="/static/point/icon1.png" @click="toPoint(1)"></cover-image>
			</cover-view> -->
			</map>
			<view class="flex align quan" @click="toScal()">
				<image src="/static/quan.png"></image>
				<view>查看{{scaleMap?'小':'大'}}地图</view>
			</view>
		</view>
		<view class="mainList">
			<view class="heng"></view>
			<view class="flex align between selNav">
				<view class="sel-item">
					<view>由近到远</view>
					<view class="active"></view>
				</view>
				<view class="sel-item">
					<view>由远到近</view>
				</view>
			</view>
			<view class="list flex" :style="index==indexS?'border:solid 4rpx #00AF91':''" v-for="(item,index) in covers"
				:key="index">
				<image class="cover" src="/static/banner.png" mode="aspectFill"
					@click="toPoint(item.latitude,item.longitude,index)"></image>
				<view class="info" @click="toPoint(item.latitude,item.longitude,index)">
					<view class="title">{{item.label.content}}</view>
					<view class="tabs flex align">
						<view>露天停车场</view>
						<view>有充电桩</view>
					</view>
					<view class="flex align between address">
						<view class="ponit flex align">
							<image src="/static/location2.png"></image>
							<view>2.1km</view>
						</view>
					</view>
				</view>
				<view class="add-btn" @click="toMap()">去这里</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: 0, // 使用 marker点击事件 需要填写id
				title: 'map',
				latitude: 39.909,
				longitude: 116.39742,
				position:{
					name:'北京天安门',
					latitude: 39.909,
					longitude: 116.39742,
				},
				scale: 14,
				covers: [{
					latitude: 39.909,
					longitude: 116.39742,
					iconPath: 'https://gxtravel.ncscloudmedia.com/uploads/png/20250701/c67170546ecc2a72ad2a7f5d5579b093.png',
					width: 30,
					height: 36,
					label: {
						content: '艾溪湖湿地公园停车场',
						bgColor: '#00AF91',
						color: '#fff',
						fontSize: '12',
						borderRadius: '20',
						padding: 5,
						textAlign: 'center',
						x: -50
					}
				}, {
					latitude: 39.90,
					longitude: 116.39,
					iconPath: 'https://gxtravel.ncscloudmedia.com/uploads/png/20250701/c67170546ecc2a72ad2a7f5d5579b093.png',
					width: 30,
					height: 36,
					label: {
						content: '艾溪湖湿地公园停车场2',
						bgColor: '#00AF91',
						color: '#fff',
						fontSize: '12',
						borderRadius: '20',
						padding: 5,
						textAlign: 'center',
						x: -50
					}
				}, {
					latitude: 39.904,
					longitude: 116.40,
					iconPath: 'https://gxtravel.ncscloudmedia.com/uploads/png/20250701/c67170546ecc2a72ad2a7f5d5579b093.png',
					width: 30,
					height: 36,
					label: {
						content: '艾溪湖湿地公园停车场3',
						bgColor: '#00AF91',
						color: '#fff',
						fontSize: '12',
						borderRadius: '20',
						padding: 5,
						textAlign: 'center',
						x: -50
					}
				}],
				mapContext: '',
				indexS: 0,
				scaleMap: false,
				polyline: [{ // 多边形数据数组
					points: [{
							latitude: 39.909,
							longitude: 116.39742
						}, // 起点
						{
							latitude: 39.90,
							longitude: 116.39
						}, // 中点
						{
							latitude: 39.904,
							longitude: 116.40
						} // 终点
					],
					color: '#FF0000DD', // 线颜色
					width: 4, // 线宽
					dottedLine: false // 是否虚线
				}]
			};
		},
		methods: {
			toScal() {
				this.scaleMap = !this.scaleMap
			},
			toPoint(latitude, longitude, index) {
				this.indexS = index
				this.mapContext.moveToLocation({
					longitude: longitude, // 目标位置的经度
					latitude: latitude, // 目标位置的纬度
					// 其他可选参数，如动画效果等
					animation: true,
					success: (res) => {
						//这里加300ms的延时是为了防止和moveToLocation功能冲突，保留地图移动的动画
						const timer = setTimeout(() => {
							this.longitude = longitude;
							this.latitude = latitude;
							clearTimeout(timer);
							//进行缩放，设置为16
							// this.scale = 12;
						}, 500);
					},

				});
			},
			toReturn(){
				uni.navigateBack()
			},
			// 选择地图
			toMap() {
				let that = this
				uni.showActionSheet({
					itemList: ['高德地图', '百度地图', '腾讯地图'],
					success: function(res) {
						that.guide(res.tapIndex)
					},
					fail: function(res) {
						console.log(res.errMsg);
					}
				});
			},
			guide(signMap) {
				uni.showLoading({
					title: '跳转中'
				});
				let {
					position
				} = this;
				let that = this
				if (position.name && position.name != '') {
					//地点位置position.name 地点经纬度lng lat
					var lng = position.longitude; //经度39.9
					var lat = position.latitude; //纬度116.4
					if (signMap == 0) {
						// 高德地图
						console.log('000')
						console.log(position.name, lng, lat, '1111')
						uni.getSystemInfo({
			
							success: (res) => {
								console.log(res)
								if (res.platform == "android") {
									window.location.href =
										"androidamap://viewMap?sourceApplication=appname&poiname=" + position
										.name + "&lat=" + lat + "&lon=" + lng + "&dev=0";
									//判断是否跳转
									setTimeout(function() {
										let hidden = window.document.hidden || window.document
											.mozHidden || window.document.msHidden || window.document
											.webkitHidden
										if (typeof hidden == "undefined" || hidden == false) {
											//调用高德地图
											window.location.href =
												"https://uri.amap.com/marker?position=" + lng + "," +
												lat + "&name=" + position.name;
										}
									}, 2000);
								} else {
									window.location.href =
										"iosamap://viewMap?sourceApplication=appname&poiname=" + position
										.name + "&lat=" + lat + "&lon=" + lng + "&dev=0";
									//判断是否跳转
									setTimeout(function() {
										let hidden = window.document.hidden || window.document
											.mozHidden || window.document.msHidden || window.document
											.webkitHidden
										if (typeof hidden == "undefined" || hidden == false) {
											//调用高德地图
											window.location.href =
												"https://uri.amap.com/marker?position=" + lng + "," +
												lat + "&name=" + position.name;
										}
									}, 2000);
								}
							}
						})
					} else if (signMap == 1) {
						// // 百度地图
						let newPo = that.txMapToBdMap(lng,lat)
						uni.getSystemInfo({
							success: (res) => {
								if (res.platform == "android") {
									let d = new Date();
									let t0 = d.getTime();
									window.location.href =
										"androidamap://viewMap?sourceApplication=appname&poiname=" + position
										.name + "&lat=" + newPo.lat + "&lon=" + newPo.lng + "&dev=0";
									//由于打开需要1～2秒，利用这个时间差来处理－－打开app后，返回h5页面会出现页面变成app下载页面，影响用户体验
									var delay = setInterval(function() {
										var d = new Date();
										var t1 = d.getTime();
										if (t1 - t0 < 3000 && t1 - t0 > 2000) {
											window.location.href =
												"http://api.map.baidu.com/marker?location=" + newPo.lat +
												"," + newPo.lng + "&title=" + position.name +
												"&content=地点&output=html&src=webapp.baidu.openAPIdemo";
										}
										if (t1 - t0 >= 3000) {
											clearInterval(delay);
										}
									}, 1000);
								} else {
									let d = new Date();
									let t0 = d.getTime();
									window.location.href =
										"iosamap://viewMap?sourceApplication=appname&poiname=" + position
										.name + "&lat=" + newPo.lat + "&lon=" + newPo.lng + "&dev=0";
									//由于打开需要1～2秒，利用这个时间差来处理－－打开app后，返回h5页面会出现页面变成app下载页面，影响用户体验
									let delay = setInterval(function() {
										var d = new Date();
										var t1 = d.getTime();
										if (t1 - t0 < 3000 && t1 - t0 > 2000) {
											window.location.href =
												"http://api.map.baidu.com/marker?location=" + newPo.lat +
												"," + newPo.lng + "&title=" + position.name +
												"&content=地点&output=html&src=webapp.baidu.openAPIdemo";
										}
										if (t1 - t0 >= 3000) {
											clearInterval(delay);
										}
									}, 1000);
								}
							}
						})
					} else {
						// // 腾讯地图
						uni.getSystemInfo({
							success: (res) => {
								if (res.platform == "android") {
									window.location.href =
										"androidamap://viewMap?sourceApplication=appname&poiname=" + position
										.name + "&lat=" + lat + "&lon=" + lng + "&dev=0";
									//判断是否跳转
									setTimeout(function() {
										let hidden = window.document.hidden || window.document
											.mozHidden || window.document.msHidden || window.document
											.webkitHidden
										if (typeof hidden == "undefined" || hidden == false) {
											//调用腾讯地图
											window.location.href =
												`https://apis.map.qq.com/uri/v1/marker?marker=coord:(${lat},${lng})&addr:${position.name}`
										}
									}, 2000);
								} else {
									window.location.href =
										"iosamap://viewMap?sourceApplication=appname&poiname=" + position
										.name + "&lat=" + lat + "&lon=" + lng + "&dev=0";
									//判断是否跳转
									setTimeout(function() {
										let hidden = window.document.hidden || window.document
											.mozHidden || window.document.msHidden || window.document
											.webkitHidden
										if (typeof hidden == "undefined" || hidden == false) {
											//调用高德地图
											window.location.href =
												`https://apis.map.qq.com/uri/v1/marker?marker=coord:(${lat},${lng})&addr:${position.name}`
										}
									}, 2000);
								}
							}
						})
					}
				} else {
					uni.showToast({
						title: '暂不知道该地点位置',
						icon: 'none',
						duration: 2000,
					});
				}
			},
			/**
			 * 腾讯地图转百度地图经纬度
			 * @param {Number} lat
			 * @param {Number} lng
			 * @returns
			 */
			txMapToBdMap(lng, lat) {
			    let x_pi = (3.14159265358979324 * 3000.0) / 180.0;
			    let x = lng;
			    let y = lat;
			    let z = Math.sqrt(x * x + y * y) + 0.00002 * Math.sin(y * x_pi);
			    let theta = Math.atan2(y, x) + 0.000003 * Math.cos(x * x_pi);
			    let lngs = z * Math.cos(theta) + 0.0065;
			    let lats = z * Math.sin(theta) + 0.006;
			 
			    return {
			        lng: lngs,
			        lat: lats,
			    };
			}
		},
		mounted() {
			uni.getLocation({
				type: 'wgs84',
				success: function(res) {
					// alert(res.longitude)
					console.log('当前位置的经度：' + res.longitude);
					console.log('当前位置的纬度：' + res.latitude);
				},
				fail: function(res) {
					// alert(res)
					console.log(res)
				}
			});
			// 获取map组件的上下文（context），以便后续调用其方法
			this.$nextTick(() => {
				this.mapContext = uni.createMapContext('map', this);
			});


		}
	}
</script>

<style lang="scss" scoped>
	.page-map {
		position: relative;

		.quan {
			position: absolute;
			padding: 12rpx 16rpx;
			font-size: 28rpx;
			bottom: 80rpx;
			right: 30rpx;
			background: white;
			box-shadow: 0 10rpx 20rpx 1rpx gainsboro;
			border-radius: 8rpx;

			image {
				width: 40rpx;
				height: 40rpx;
				margin-right: 16rpx;
			}
		}
	}

	.mainList {
		background: #F6F7FB;
		position: relative;
		top: -50rpx;
		z-index: 10;
		padding: 16rpx 0;
		border-radius: 24rpx 24rpx 0 0;
		box-shadow: 0px -8rpx 16rpx 0px gainsboro;

		.heng {
			width: 88rpx;
			height: 12rpx;
			border-radius: 12rpx;
			background: #BCBCBC;
			margin: 16rpx auto;
		}

		.selNav {
			margin: 30rpx 28rpx;

			.sel-item {
				background: white;
				font-size: 32rpx;
				box-shadow: 0px 2rpx 10rpx 0px gainsboro;
				width: 315rpx;
				line-height: 68rpx;
				text-align: center;
				border-radius: 44rpx;
				position: relative;
				z-index: 2;

				.active {
					position: absolute;
					width: 80rpx;
					height: 18rpx;
					background: #12D5B4;
					border-radius: 14rpx;
					bottom: 10rpx;
					left: 50%;
					margin-left: -40rpx;
					z-index: -1;
				}
			}
		}

		.list {
			background: white;
			border-radius: 16rpx;
			padding: 12rpx;
			margin: 30rpx;
			position: relative;

			.cover {
				width: 184rpx;
				height: 184rpx;
				border-radius: 16rpx;
			}

			.info {
				margin-left: 12rpx;
				width: 70%;
				position: relative;

				.title {
					font-size: 32rpx;
				}

				.tabs {
					margin: 16rpx 0 40rpx;

					view {
						background: #DAF5EF;
						border-radius: 8rpx;
						color: #00AF91;
						font-size: 24rpx;
						padding: 0 12rpx;
						margin-right: 12rpx;
					}
				}

				.address {
					.ponit {
						color: #6C7A94;
						font-size: 24rpx;

						image {
							width: 24rpx;
							height: 30rpx;
							margin-right: 4rpx;
						}
					}

				}
			}

			.add-btn {
				background: linear-gradient(to right, #12D5B4, #08C1A1, #00AF91);
				color: white;
				width: 160rpx;
				line-height: 56rpx;
				border-radius: 32rpx;
				text-align: center;
				position: absolute;
				right: 0;
				bottom: 12rpx;
			}
		}
	}
</style>